<template>
  <div class="userbox">
    <div class="searchbox">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        v-on:input="searchGoods"
      ></el-input>
      <span class="iconfont icon-sousuo" @click="sousuo"></span>
    </div>
    <el-table
      :data="
        userarr.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column prop="id" label="id" width="200"> </el-table-column>
      <el-table-column prop="userName" label="用户名" width="200">
      </el-table-column>
      <el-table-column prop="userGender" label="性别" width="200">
        <template slot-scope="scope">
          <p v-if="scope.row.userGender == 0">保密</p>
          <p v-if="scope.row.userGender == 1">男</p>
          <p v-if="scope.row.userGender == 2">女</p>
          <p v-if="scope.row.userGender == null">未填写</p>
          <!-- {{ scope.row.userGender== }} -->
        </template>
      </el-table-column>
      <el-table-column prop="userBirthday" label="生日" width="200">
      </el-table-column>
      <el-table-column prop="userPlace" label="地址" width="200">
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 10,
      totalCount: 0,
      //用户管理数组
      userarr: [],
      //   输入框
      input: "",
      zhi: "",
    };
  },
  methods: {
    // 每页显示几条
    handleSizeChange(val) {
      console.log(val);
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 搜索事件
    searchGoods(e) {
      this.zhi = e;
    },
    // 点击查询
    sousuo() {
      this.$axios.get(`api/user/getUser?userName=${this.zhi}`).then((res) => {
        this.userarr = res.data.data;
        this.totalCount = res.data.data.length;
      });
    },
  },
  mounted() {
    // 查看所有用户
    this.$axios.get("api/user/getAll").then((res) => {
      this.userarr = res.data.data;
      this.totalCount = res.data.data.length;
    });
  },
};
</script>
<style scoped>
.userbox {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
.searchbox {
  margin: 20px;
  display: flex;
  align-content: space-around;
  width: 300px;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
</style>